<template>
  <div class="song-box">
    <van-nav-bar
      title="好声音"
      :border="false"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!--  -->
    <div class="s-swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img width="100%" src="https://img1.baidu.com/it/u=1245076727,1440809518&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img1.baidu.com/it/u=3657962557,538146537&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img1.baidu.com/it/u=982690936,388119726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=3180371210,1759943987&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img0.baidu.com/it/u=16076104,235942176&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img0.baidu.com/it/u=2101128326,948934116&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></van-swipe-item>
</van-swipe>
    </div>
    <!--  -->
    <p></p>
    <div class="songs">
      <p>实时音频</p>
      <div class="song-list">
        <!--  -->
        <div class="lis" v-for="(item,index) in song" :key="index">
          <div class="son-img">
            <img width="100%" :src="item.imgurl" alt="">
          </div>
          <h3>{{item.uname}}</h3>
          <p>{{item.singname}}</p>
        </div>
        <!--  -->
        
      </div>
    </div>
    <!--  -->
    <div class="swich">
      <div
        class="swi"
        v-for="(item,index) in list"
        :key="index"
        @click="btn(index)"
        :class="{active: num === index }"
      >{{item.title}}</div>
    </div>
  </div>
</template>

<script>
import { getGoodVoice } from "@/services";
export default {
  data() {
    return {
      list: [
        {
          title: "声音魅力榜",
        },
        {
          title: "声音点赞榜",
        },
        ],
        song:[],
      num:0,
    };
  },
    methods: {
        btn(i) {
        this.num = i
    },
    onClickLeft() {
      //  Toast('返回');
      this.$router.push("find");
      // console.log(1);
    },
    onClickRight() {
      //   Toast('按钮');
    },
    },
    created() {
        getGoodVoice().then(res => {
            // console.log(res.data.data);
            let arr = res.data.data
            this.song.push(...arr)
        console.log(this.song);
    })
  },
};
</script>

<style lang="scss" >
.song-box {
  width: 90%;
  margin: 0 auto;
//   轮播
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 248px;
    height: 248px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-nav-bar {
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #1a1a1a;
    border: none;
    // border: 1px solid red;
    // border: 1px solid red;
  }
  .van-nav-bar__content {
    height: 80px;
    // border: 1px solid #1a1a1a;
    border-bottom: 1px solid black;
    //
  }
  .van-nav-bar__title {
    height: 80px;
    font-size: 40px;
    line-height: 80px;
    color: white;
  }
  .van-icon-arrow-left {
    font-size: 40px;
    color: #9a9aa4;
  }
  .van-nav-bar__right {
    font-size: 28px;
    color: #9a9aa4;
  }
  .s-swipe {
    width: 90%;
    height: 248px;
    margin: 40px auto;
    background-color: #efefef;
  }
  .songs {
    width: 90%;
    margin: 0 auto;
    p {
      font-size: 36px;
      color: #9a9aa4;
    }
    .song-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .lis {
        width: 200px;
        height: 300px;
        margin-top: 20px;
        .son-img {
          // margin-top: 10px;
          width: 200px;
          height: 200px;
          border-radius: 20px;
          background-color: #9a9aa4;
        }
        h3 {
          font-size: 30px;
          color: #9a9aa4;
          margin: 10px 0;
        }
        p {
          font-size: 25px;
        }
      }
    }
  }
  .swich {
    width: 464px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 50px;
    background-color: #cecece;
    .swi {
        width: 45%;
        height: 60px;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
    }
    .active{
        background-color: #9a9a9a;
    }
  }
}
</style>